<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
            <el-form-item label="问卷编号">
              <br> <br>
                <el-input v-model="formInline.questionnaireNo" placeholder style="margin-left:-60px;width:200px"></el-input>
            </el-form-item>
            <el-form-item label="问卷名称">
              <br> <br>
                <el-input v-model="formInline.questionnaireName" placeholder style="margin-left:-60px;width:200px"></el-input>
            </el-form-item>
            <el-form-item label="发布状态">
              <br> <br>
                <el-select v-model="formInline.status" style="margin-left:-60px;width:200px">
                    <el-option label="全部" value></el-option>
                    <el-option label="已发布" value="1"></el-option>
                    <el-option label="未发布" value="0"></el-option>
                </el-select>
            </el-form-item>
                 <el-form-item style="margin-left:700px;text-align:right">
                <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询</el-button>
                <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
                <el-button type="primary" @click="toAdd()" icon="el-icon-edit" size="mini">创建问卷</el-button>
             </el-form-item>
        </el-form>

        <el-table
            :data="tableData"
            v-loading="loading"
            border
            height="400px"
            style="width: 100%;"
            :header-cell-style="{background:'#ebecf0',color:'#606266'}"
            @sort-change="handleSort"
        >
            <el-table-column type="index" width="60" label="序号" align="center" ></el-table-column>
            <el-table-column
                prop="questionnaireNo"
                label="问卷编码"
                align="center"
                width="150"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                prop="questionnaireName"
                label="问卷名称"
                  align="center"
                header-align="center"
                width="200"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                prop="remark"
                  align="center"
                label="问卷描述"
                header-align="center"
               
                width="250"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column label="发布状态" align="center" width="150">
                <template slot-scope="scope">
                    <span v-if="scope.row.status != '1'">未发布</span>
                    <span v-if="scope.row.status == '1'">已发布</span>
                </template>
            </el-table-column>
            <el-table-column prop="countPeo" label="统计人数" align="center" width="120" sortable="countPeo"></el-table-column>
            <el-table-column prop="satisfaction" label="问卷满意度" align="center" width="120" sortable="satisfaction" :formatter="fixData"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" width="150"></el-table-column>
            <el-table-column prop="createUser" label="创建人" align="center" width="120"></el-table-column>
            <el-table-column
                label="操作"
                width="200"
                align="center"

                header-align="center"
                fixed="right"
            >
                <template slot-scope="scope">
                    <!-- <div style="width:350px;text-align:center;margin:0 auto"> -->
                        <el-button
                            type="text"
                            @click="toDetail(scope.row)"
                            v-if="scope.row.status == 1"
                        >查看</el-button>
                        <el-button
                            type="text"
                            @click="toEdit(scope.row)"
                            v-if="scope.row.status != 1"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            @click="toQuestionnaireStatistical(scope.row.uuid)"
                        >问卷统计</el-button>
                        <el-button
                            type="text"
                            @click="modifyQuestionnaire(scope.row.uuid, '1')"
                            v-if="scope.row.status != 1"
                        >发布</el-button>
                        <el-button
                            type="text"
                            @click="modifyQuestionnaire(scope.row.uuid, '0')"
                            v-if="scope.row.status == 1"
                        >撤回</el-button>
                        <!-- <el-button type="text" @click="deleteGoodsActivity(scope.row.uuid)" v-if="scope.row.status == '0'">删除</el-button> -->
                    <!-- </div> -->
                </template>
            </el-table-column>
        </el-table>

        <div class="block" style="margin-top:5px;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
                :current-page="listQuery.current"
                :page-size="listQuery.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import {
  qryQuestionnaire,
  modifyQuestionnaire,
} from "@/api/questionnaireEdit";

const curDateStr = function (){
  var curDate = new Date();
  var year = curDate.getFullYear();
  var month = curDate.getMonth() + 1;
  month = month > 9 ? month : "0" + month;
  var date = curDate.getDate();
  date = date > 9 ? date : "0" + date;
  return year + "-" + month + "-" + date;
}

export default {
  data() {
    return {
      loading: true,
      uuid: "",
      formInline: {
        sortList:[],
        questionnaireNo: "",
        questionnaireName: "",
        status: "",
        runStatus: "",
        runTimeRange: ['',''],
        createTimeRange: ['','']
      },
      total: 0,
      listQuery: {
        current: 1,
        size: 100
      },
      tableData: [],//问卷列表
    };
  },
  mounted() {
    this.qryQuestionnaire();
  },
  methods: {
    fixData(row, column, cellValue, index) {
      if(cellValue != null && !isNaN(cellValue)){
        return cellValue+"%";
      }else{
        return cellValue;
      }
		},
    //问卷列表
    qryQuestionnaire() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          questionnaireNo: this.formInline.questionnaireNo.trim(),
          questionnaireName: this.formInline.questionnaireName.trim(),
          status: this.formInline.status,
          sortList: this.formInline.sortList,
        },
        ascs: [],
        descs: []
      };
      qryQuestionnaire(data).then(res => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    fixData2(row, column, cellValue, index) {
      if (cellValue == null || cellValue == "") return "";
      return cellValue.substring(0, 10);
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.qryQuestionnaire();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.qryQuestionnaire();
    },
    //查询
    search() {
      this.listQuery.current = 1;
      this.qryQuestionnaire();
    },
    //清空
    kong() {
      this.formInline.questionnaireNo = "";
      this.formInline.questionnaireName = "",
      this.formInline.status = "";
      this.formInline.sortList = [];
    },
    //添加问卷
    toAdd() {
      this.$router.push({
        name: "questionnaireEdit",
        params: {}
      });
    },
    //查看问卷
    toDetail(item) {
      this.$router.push({
        name: "questionnaireEdit",
        params: {
          edit: item,
          disabledFlag: true,
          disabledFlagone: true
        }
      });
    },
    //问卷统计
    toQuestionnaireStatistical(uuid) {
        this.$router.push({
        name: "questionnaireStatistical",
        params: {
          uuid: uuid
        }
      });
    },
    //编辑问卷
    toEdit(item) {
      this.$router.push({
        name: "questionnaireEdit",
        params: {
          edit: item,
          disabledFlag: true,
          disabledFlagone: false
        }
      });
    },
    modifyQuestionnaire(uuid, status) {
      var msg = "";
      if (status == "1") {
        msg = "发布";
      } else if (status == "0") {
        msg = "撤回";
      }
      this.$confirm("确定" + msg + "当前问卷吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            uuid: uuid,
            status: status
          };
          modifyQuestionnaire(data).then(res => {
            if (res.code == "1") {
              this.$message({
                showClose: true,
                message: msg + "成功",
                type: "success"
              });
              this.qryQuestionnaire();
            } else {
              this.$message({
                showClose: true,
                message: res.message,
                type: "error"
              });
            }
            this.loading = false;
          });
        })
        .catch(() => {});
    },
    deleteGoodsActivity(uuid, status) {
      this.$confirm("确定删除当前问卷吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            uuid: uuid,
            status: status
          };
          deleteGoodsActivity(data).then(res => {
            if (res.code == "1") {
              this.$message({
                showClose: true,
                message: "删除成功",
                type: "success"
              });
              this.qryQuestionnaire();
            } else {
              this.$message.error("删除失败");
            }
            this.loading = false;
          });
        })
        .catch(() => {});
    },
    //点击空白日期初始化
    focusPickerDate(){
      this.formInline.createTimeRange = [curDateStr(), curDateStr()];
    },
    focusPickerDate2(){
      this.formInline.runTimeRange = [curDateStr(), curDateStr()];
    },
    //数字格式化
    dateRange(row, column, cellValue, index) {
      if (row.beginDate != null && row.beginDate.toString().length >= 10) {
        return row.beginDate.toString().substr(0,10) + " — " + row.endDate.toString().substr(0,10)
      } else {
        return "—";
      }
    },
    //排序
    handleSort(val) {
      let sortModel = "";
      if (val.order === "ascending") {
        sortModel = "ASC";
        if(val.prop == "countPeo"){
          this.formInline.sortList = [{"sort":"asc","sortField":"countPeo"}];
          this.search();
        }
        if(val.prop == "satisfaction"){
          this.formInline.sortList = [{"sort":"asc","sortField":"satisfaction"}];
          this.search();
        }
      } else if (val.order === "descending") {
        sortModel = "DESC";
        if(val.prop == "countPeo"){
          this.formInline.sortList = [{"sort":"desc","sortField":"countPeo"}];
          this.search();
        }
        if(val.prop == "satisfaction"){
          this.formInline.sortList = [{"sort":"desc","sortField":"satisfaction"}];
          this.search();
        }
      }
    },
  },

};
</script>
<style lang="less" scoped>
</style>
